<template>
  <div>
    <div class="box5">
         <van-field
          v-model="username"
          name="username"
          placeholder="搜索框"
          :rules="[{ required: true, message: '商品名称' }]"
          class="ssk"
        />
    </div>
    
    <van-swipe :autoplay="3000" lazy-render>
      <van-swipe-item v-for="image in images" :key="image">
        <img width="100%" height="100rem" :src="image" />
      </van-swipe-item>
    </van-swipe>
    <van-grid column-num="5">
      <van-grid-item icon="/img/2.png" text="热门推荐" />
      <van-grid-item icon="/img/3.png" text="本店热卖" />
      <van-grid-item icon="/img/4.png" text="优选新品" />
      <van-grid-item icon="/img/6.png" text="网红爆品" />
      <van-grid-item icon="/img/5.png" text="天天特价" />
    </van-grid>
    <van-card
      v-for="item in data"
      :level="item.level"
      :title="item.title"
      :person="item.person"
      :desc="描述信息"
      :id="item.id"
      :thumb="item.url"
      @click="toget(item)"
    />
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = new useRouter();
const images = [
  "/img/1.png",
  "https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg",
];

const data = ref([]);
console.log(data);

const getdata = async () => {
  const resp = await axios.get("/api/room/list");
  console.log(resp);
  data.value = resp.data.data.list;
};

const toget=(v)=>{
    router.push({
        path: '/detail/'+v.id,
        query: v
    })
}
getdata();
</script>

<style >
.box5{
  width: 100%;
  background: rgb(17, 224, 141);
}
.ssk{
  width: 100%;
  margin-top: 10px;
  padding-left: 10px;
}
</style>